<!--
 * @Author: 你的名字
 * @Date: 2022-11-01 09:41:10
 * @FilePath: /demo-gather/src/views/ChartTest/ChartTest.vue
 * @Description: 
-->
<template>
  <div>
    <section class="btn-box">
      <exportFile
        @exportFile="exportFile"
        :fileList="fileList"
        :pdfTitle="pdfTitle"
        :dialogVisible.sync="exportDialogVisible"
      ></exportFile>
    </section>
    <el-row :gutter="20">
      <el-col :span="8">
        <p>饼图</p>
        <ChartCom :options="pieOption"></ChartCom>
        <ChartCom></ChartCom>
      </el-col>
      <el-col :span="8">
        <p>柱状图</p>

        <ChartCom type="bar" :options="barOption"></ChartCom>
        <ChartCom type="bar"></ChartCom>
      </el-col>
      <el-col :span="8">
        <p>折线图</p>
        <ChartCom ref="lineRef" type="line" :options="lineOption"></ChartCom>
        <ChartCom type="line"></ChartCom>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ChartCom from "@/components/normal/chart-com/chart-com.vue";
import exportFile from "@/components/normal/export-file/export-file.vue";
let dayjs = require("dayjs");

// import {map} from 'lodash';
export default {
  name: "ChartTest",
  components: { ChartCom, exportFile },
  data() {
    return {
      pieOption: {},
      barOption: {},
      lineOption: {},
      pdfTitle:'',
        exportDialogVisible: false,
      fileList: [],
       date: dayjs().format("YYYYMMDD"), // 当前日期

    };
  },
  mounted() {
    this.initEchartsPictorialBar2();
    this.initBarData();
    this.initLine();
  },
  methods: {
    initEchartsPictorialBar2() {
      const data = [];
      for (var i = 0; i < 3; i++) {
        data.push({
          value: 59,
          name: "名称" + i,
        });
      }
      this.pieOption = {
        legend: {
          textStyle: {
            color: "#f40",
            fontSize: 16,
          },
        },
        series: [
          {
            data: data,
          },
        ],
      };
    },
    initBarData() {
      this.barOption = {
        color: "#f40",

        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "yellow",
            },
          },
        ],
      };
    },
    initLine() {
      this.lineOption = {
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [20, 92, 91, 1293, 120, 130, 120],
            type: "line",
            areaStyle: {},
          },
          {
            data: [820, 932, 901, 1234, 1290, 1330, 1320],
            type: "line",
            areaStyle: {},
          },
        ],
      };
    },
    exportFile(){
       this.pdfTitle = "测试分析报告" + "(" + this.date + ")";
          this.fileList.push({
          title: "",
          src: "第一分析模块",
          type: "title",
        });
          this.fileList.push({
          title: "饼图报告",
          src: this.pieOption,
          type: "echarts",
        });
    this.fileList.push({
          title: "柱状图报告",
          src: this.pieOption,
          type: "echarts",
        });
        this.initFileSrc([
          { title: "折线图", name: "lineRef", isComponent: true, },
        ]);
        this.exportDialogVisible =true;
    },
    
        initFileSrc(domList) {
      let _this = this;
      let src = "";
      // this.dynamicDom = "";
      for (let item of domList) {
        if (item.isComponent) {
          src = _this.$refs[item.name].$el.outerHTML;
        } else {
          src = _this.$refs[item.name].outerHTML;
        }
        _this.fileList.push({ title: item.title ? item.title : "", src: src });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.btn-box{
  text-align: left;
  padding: 0.1rem;
}
p {
  font-size: 0.32rem;
  color: aqua;
  text-align: center;
}
/deep/.chart-com {
  width: 100%;
  height: 4rem;
  margin: 0.1rem 0;
  background-color: #194752;
}
</style>